<template>
  <div class="StatusIcon">
    <svg
      width="16px"
      height="16px"
      viewBox="0 0 16 16"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <g id="02工作台/01默认" transform="translate(-240, -228)" :fill="iconColor" fill-rule="nonzero" v-if="mom > 0">
        <g id="编组-6" transform="translate(210, 106)">
          <g id="编组-5" transform="translate(30, 120)">
            <g id="icon/16/上升" transform="translate(1, 7)">
              <path
                d="M13.4669339,0 L10.4649299,0 C10.1703407,0 9.93186373,0.232971694 9.93186373,0.520760258 C9.93186373,0.808548821 10.1703407,1.04152052 10.4649299,1.04152052 L12.1412826,1.04152052 L9.13927856,3.97422302 L5.87775551,0.767436169 C5.75851703,0.650950322 5.59719439,0.596133453 5.43587174,0.602985562 C5.28156313,0.596133453 5.12725451,0.650950322 5.00801603,0.767436169 L0.168336673,5.49539114 C-0.0561122244,5.71465862 -0.0561122244,6.07782038 0.168336673,6.29708785 C0.392785571,6.51635533 0.764529058,6.51635533 0.988977956,6.29708785 L5.44288577,1.95285097 L8.73947896,5.17334203 C8.96392786,5.39260951 9.33567134,5.39260951 9.56012024,5.17334203 C9.58116232,5.15278571 9.60220441,5.13222938 9.61623246,5.10482095 L12.9338677,1.86377355 L12.9338677,3.44661065 C12.9338677,3.73439922 13.1723447,3.96737091 13.4669339,3.96737091 C13.761523,3.96737091 14,3.73439922 14,3.44661065 L14,0.520760258 C14,0.232971694 13.761523,0 13.4669339,0 Z"
                id="路径"
              ></path>
            </g>
          </g>
        </g>
      </g>
      <g id="02工作台/01默认" transform="translate(-667, -228)" :fill="iconColor" fill-rule="nonzero" v-if="mom < 0">
        <g id="编组-6备份" transform="translate(637, 106)">
          <g id="编组-5备份" transform="translate(30, 120)">
            <g id="icon/16/上升" transform="translate(1, 7)">
              <path
                d="M13.4669339,0 L10.4649299,0 C10.1703407,0 9.93186373,0.232971694 9.93186373,0.520760258 C9.93186373,0.808548821 10.1703407,1.04152052 10.4649299,1.04152052 L12.1412826,1.04152052 L9.13927856,3.97422302 L5.87775551,0.767436169 C5.75851703,0.650950322 5.59719439,0.596133453 5.43587174,0.602985562 C5.28156313,0.596133453 5.12725451,0.650950322 5.00801603,0.767436169 L0.168336673,5.49539114 C-0.0561122244,5.71465862 -0.0561122244,6.07782038 0.168336673,6.29708785 C0.392785571,6.51635533 0.764529058,6.51635533 0.988977956,6.29708785 L5.44288577,1.95285097 L8.73947896,5.17334203 C8.96392786,5.39260951 9.33567134,5.39260951 9.56012024,5.17334203 C9.58116232,5.15278571 9.60220441,5.13222938 9.61623246,5.10482095 L12.9338677,1.86377355 L12.9338677,3.44661065 C12.9338677,3.73439922 13.1723447,3.96737091 13.4669339,3.96737091 C13.761523,3.96737091 14,3.73439922 14,3.44661065 L14,0.520760258 C14,0.232971694 13.761523,0 13.4669339,0 Z"
                id="路径"
                transform="translate(7, 3.2308) scale(1, -1) translate(-7, -3.2308)"
              ></path>
            </g>
          </g>
        </g>
      </g>
      <g id="02工作台/01默认" transform="translate(-1523, -228)" :fill="iconColor" fill-rule="nonzero" v-if="mom == 0">
        <g id="编组-6备份-3" transform="translate(1493, 106)">
          <g id="编组-5备份" transform="translate(30, 120)">
            <g id="icon/16/上升" transform="translate(2, 7)">
              <path
                d="M8.96411142,0.150111545 C9.16760867,-0.0533857003 9.5009732,-0.0494928938 9.70927921,0.158813112 L11.8320166,2.2815505 C12.0403226,2.48985651 12.0442154,2.82322104 11.8407182,3.02671829 L9.77182951,5.09560695 C9.56833227,5.29910419 9.23496773,5.29521138 9.02666173,5.08690538 C8.81835572,4.87859937 8.81446291,4.54523484 9.01796016,4.34173759 L10.137195,3.22250274 L0.5,3.17 C0.223857625,3.17 4.4408921e-16,2.94614237 4.4408921e-16,2.67 L4.4408921e-16,2.54 C4.4408921e-16,2.26385763 0.223857625,2.04 0.5,2.04 L10.1581734,2.0806397 L8.97281299,0.895279331 C8.76450698,0.686973325 8.76061418,0.353608789 8.96411142,0.150111545 Z"
                id="路径"
              ></path>
            </g>
          </g>
        </g>
      </g>
    </svg>
    <span class="percent-num" :style="{ color: iconColor }">{{ mom }}%</span>
    <span>同比上月</span>
  </div>
</template>
<script setup lang="ts">
import { computed } from "vue";

interface IconStatus {
  type: number;
  mom: number;
}
const props = defineProps<IconStatus>();

const iconColor = computed(() => {
  const colors = ["#74D98C", "#5378F6", "#F8D27C", "#F56C6C"];
  return colors[props.type];
});
// const iconSvg = computed(() => {
//   const colors = props.mom;
//   return colors[props.type];
// });
console.log(11, props.mom);

// const circleColor = ref("red");
</script>
<style scoped lang="scss">
.StatusIcon {
  display: flex;
  align-items: center;
  .percent-num {
    padding: 0 10px;
    font-size: 14px;
    color: #74d98c;
  }
  span:first-child {
    color: #74d98c;
  }
  span:last-child {
    font-size: 14px;
    color: #666666;
  }
}
</style>
